<template>
    <div id="max">
        <div id="mid-1">
            <div id="shang">
                <div id="small" class="demo-input-size">
                    <span>姓名：</span>
                    <el-input v-model="input1" class="w-50 m-2" size="large" placeholder="请输入" />
                </div>

                <div id="small" class="demo-input-size">
                    <span>联系方式：</span>
                    <el-input v-model="input2" class="w-50 m-2" size="large" placeholder="请输入" />
                </div>
                <div id="small">
                    <span>所属组织：</span>
                    <el-select v-model="value1" class="m-2" placeholder="请选择" size="large">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>
            <div id="xia">
                <div id="small" class="demo-input-size">
                    <span>账号：</span>
                    <el-input v-model="input3" class="w-50 m-2" size="large" placeholder="请输入" />
                </div>
                <div id="small">
                    <span>所属角色：</span>
                    <el-select v-model="value2" class="m-2" placeholder="请选择" size="large">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div id="small">
                    <span>状态：</span>
                    <el-select v-model="value3" class="m-2" placeholder="请选择" size="large">
                        <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>
        </div>
        <div id="mid-2">
            <el-button type="primary" @click="chaxun()">查询</el-button>
            <el-button @click="reset">重置</el-button>
        </div>
</div>

</template>
<script lang="ts">
import axios from '@/util/http';

import { defineComponent, ref,toRefs,reactive } from 'vue'
import store from '@/store/zhou/index';

export default defineComponent({
    name: "middle",

    setup() {
        // console.log(store.state.cao);
        
        const input1 = ref('');//姓名
        const input2 = ref('');//联系方式
        const input3 = ref('');//账号

        const value1 = ref('');//所属组织
        const value2 = ref('');//所属角色
        const value3 = ref('');//状态
        const options1 = [
            {
                value: '相城区疾控中心',
                label: '相城区疾控中心',
            },
            {
                value: '姑苏区疾控中心',
                label: '姑苏区疾控中心',
            },
            {
                value: '病例流调组',
                label: '病例流调组',
            },
            {
                value: '密接排查组',
                label: '密接排查组',
            }
        ];//所属组织内容
        const options2 = [
            {
                value: '疾控登记员',
                label: '疾控登记员',
            },
            {
                value: '区级管理员',
                label: '区级管理员',
            },
            {
                value: '疾控排查员',
                label: '疾控排查员',
            },
            {
                value: '领导',
                label: '领导',
            },
            {
                value: '居家监测员',
                label: '居家监测员',
            },
        ];//所属角色内容
        const options3 = [
            {
                value: '启用中',
                label: '启用中',
            },
            {
                value: '禁用中',
                label: '禁用中',
            }
        ];//状态内容
        let Table = reactive  ({
            table: []
        })
        async function chaxun(){
            await axios({
                method: 'get', 
                url: '/districtUser/queryConditionalDistrictUser',
                params: {
                    area:'相城区',
                    currentPage:1,
                    pageSize:10,
                    nickName:input1.value,
                    organization : value1.value,
                    phone :input2.value,
                    role :value2.value,
                    status:value3.value ,
                    userName :input3.value,
                }
            }).then((res) => {
                console.log(res);
                console.log("查询成功");
                // console.log(res);
                Table.table = res.data.data
                store.state.zhanghao = Table.table
                // Table.table.forEach(element => {
                //     element.createDate
                // });
            });
        }
        // console.log(store.state);
       let reset=()=>{
        input1.value=("");
        input2.value=("");
        input3.value=("");
        value1.value=("");
        value2.value=("");
        value3.value=("");

       }
        return {
            input1,
            input2,
            input3,

            value1,
            value2,
            value3,
            options1,
            options2,
            options3,
            chaxun,//查询事件
            ...toRefs(Table),
            reset
        }
    }


})

</script>
<style scoped>
#max{
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 13px;
    color: #333;
}
#mid-1{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#shang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    margin: 5px ;
}
#xia{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin: 5px;
}
span{
    width: 120px;
}
#small {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 254px;
    margin:5px 35px 5px 35px ;
}
button{
    width: 80px;
}
#mid-2{
    margin: 15px 35px;
}
</style>